<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="LiveControl.aspx.cs" Inherits="LiveControl" Title="Untitled Page" %>

<%@ Register Src="UserAccess.ascx" TagName="UserAccess" TagPrefix="uc1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Assembly="Microsoft.Web.Preview" Namespace="Microsoft.Web.Preview.UI.Controls" TagPrefix="cc2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder_Main" Runat="Server">
<script src="Scripts/editorevents.js" type="text/javascript"></script>
<script src="Scripts/editor.js" type="text/javascript"></script>
<script src="Scripts/lists.js" type="text/javascript"></script>
<script src="Scripts/draggables.js" type="text/javascript"></script>
<form id="Form_LiveControl" runat="server" oncontextmenu="return false;">  

<asp:ScriptManager ID="ScriptManager_LiveControl" runat="server">
</asp:ScriptManager>  
<asp:HiddenField ID="Hidden_EditorPageID" runat="server" />
<asp:HiddenField ID="Hidden_SessionID" runat="server" />
<asp:HiddenField ID="Hidden_UserID" runat="server" />
<asp:HiddenField ID="Hidden_LiveControlPackageID" runat="server" />
<uc1:UserAccess ID="UserAccess1" runat="server" />

<asp:UpdatePanel ID="UPanel_Timer" runat="server">
<ContentTemplate>
    <asp:Timer ID="Timer_Status" runat="server" Interval="1000" OnTick="Timer_Status_Tick"></asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
<!-- page title start -->
<h1>
	<span><asp:Label ID="Lbl_Header" runat="server" Text=""></asp:Label></span>
</h1>
<!-- page title end -->

<!-- main content start -->

<div class="mainHolder">
<!-- left block start -->
<div class="leftBlock">
		<h2>
			<span>Load Package for Live Control</span>
		</h2>
		<div class="innerBlock">
            <h3>
				<span>Search</span>
				<a href="#" class="switch">Open/Collapse</a>
			</h3>
			<div class="innerContent">
			    <a id="liveControlPackageSearchLink" href="#" onclick="loadLiveControlPackageSearch();" style="display:none;">Search Packages</a>
			    <div id="liveControl_PackageSearchFields"></div>
			    <div id="packageSearchButtons" class="row" style="display:none;">
                    <input id="liveControlPackageSearch" type="button" value="Search" onclick="getSearchResults();" />
                    <div class="spacerS"></div>
		            <input id="liveControlPackageReset" type="button" value="Reset" onclick="resetSearchFields('liveControl_PackageSearchFields');"/>
		        </div>
		    </div>           
		</div>
		<div id="liveControlPackageResultsBox" class="innerBlock collapsed">
		    <h3>
			    <span>Package Search Results</span>
			    <a href="#" class="switch">Open/Collapse</a>
		    </h3>
	        <div class="innerContent">
	            <div id="liveControl_SearchPackageAlerts" class="row" style="display:none;"></div>
                <div class="row">
		            <div class="col">
			            <select id="liveControlPackageSort" onchange="sortResults(this, 'liveControlPackageResults');" disabled="disabled">
				            <option selected="selected" value="0">Sort By</option>
				            <option value="1">Name</option>
				            <option value="2">Newest</option>							
			            </select>
			        </div>
			        <div class="col" style="float:right;">
                        <input id="liveControlPackageLoad" type="button" value="Load >>" disabled="disabled" onclick="liveControlLoadPackage();"/>
                    </div>
		        </div>
		        <div class="row">
                    <select id="liveControlPackageResults" multiple="multiple" onchange="liveControlPackageIndexChange();"  class="heightL width100">
                    </select>
	            </div>
	        </div>
		</div>

	<h2 style="border-top:solid 1px #8B8B8B;">
		<span>Add Event to Event List</span>
	</h2>
	<div class="innerBlock">
        <h3>
			<span>Search</span>
			<a href="#" class="switch">Open/Collapse</a>
		</h3>
		<div class="innerContent">
		    <a id="liveControlEventSearchLink" href="#" onclick="loadLiveControlEventSearch();">Search Events</a>
		    <div id="liveControl_EventSearchFields"></div>
		    <div id="eventSearchButtons" class="row" style="display:none;">
                <input id="liveControlEventSearch" type="button" value="Search" onclick="getSearchResults();" />
                <div class="spacerS"></div>
	            <input id="liveControlEventReset" type="button" value="Reset" onclick="resetSearchFields('liveControl_EventSearchFields');"/>
	        </div>
	    </div>
	</div>
	<div id="liveControlEventResultsBox" class="innerBlock collapsed" style="display:none;">
	    <h3>
		    <span>Event Search Results</span>
		    <a href="#" class="switch">Open/Collapse</a>
	    </h3>
        <div class="innerContent">
            <div id="liveControl_SearchEventAlerts" class="row" style="display:none;"></div>
            <div class="row">
	            <div class="col">
		            <select id="liveControlEventSort" onchange="sortResults(this, 'liveControlEventResults');" disabled="disabled">
			            <option selected="selected" value="0">Sort By</option>
			            <option value="1">Name</option>
			            <option value="2">Newest</option>							
		            </select>
		        </div>
		        <div class="col" style="float:right;">
                    <input id="liveControlAdd" type="button" value="Add >>" disabled="disabled" onclick="activeEditor.addFromIcon();"/>
                </div>
	        </div>
	        <div class="row">
                <select id="liveControlEventResults" multiple="multiple"  class="heightL width100" onchange="resultsIndexChanged(this);" ondblclick="activeEditor.addFromIcon();">
                </select>
            </div>
        </div>
	</div>
</div>
<!-- left block end -->

<!-- right block start -->
	<div class="rightBlock">
		<h2>
			<span>Live Event Control</span>
<%--        <asp:Button ID="Btn_Save" runat="server" Text="Save Live Event List" CssClass="aspButton" OnClientClick="prepareSave();" OnClick="Btn_Save_Click" />
--%>        
            <input type="button" id="liveControl_Save" value="Save Live Event List" class="right" onclick="saveLiveControlPackage(); event.cancelBubble=true;" />
        </h2>
        <div id="lblMessages"  class="errorMsg" style="display:none;"></div>
        <asp:UpdatePanel ID="UPanel_LiveControlProperties" runat="server" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Timer_Status" EventName="Tick"></asp:AsyncPostBackTrigger>
<%--            <asp:AsyncPostBackTrigger ControlID="Btn_Save" EventName="Click"></asp:AsyncPostBackTrigger>
--%>        </Triggers> 
        <ContentTemplate>
<%--            <asp:Label ID="Lbl_Messages" runat="server"></asp:Label>
--%>            
                <div class="innerBlock">
                <H3>
                    <SPAN>Live Status</SPAN>
                    <A class="switch" href="#">Open/Collapse</A>
                </H3>
                <div class="innerContent">
                    <div class="row" style="width:880px;">
                        <div class="col widthL">
                            <div class="row">
                                <span style="font-weight:bold;">Active System Status:&nbsp;</span>
                                <asp:Label id="Lbl_Status" runat="server" Text=""></asp:Label>
                                <asp:Label id="Lbl_LastUpdated" runat="server" Text=""></asp:Label>
                            </div>
                            <div class="row">
                                <asp:Button id="Btn_WebControl" runat="server" Text="Switch to Web Control Mode" OnClientClick="saveLiveControlPackage();" OnClick="Btn_WebControl_Click"></asp:Button>
                                <div class="spacerS"></div>
                                <asp:Button id="Btn_WebControlCancel" runat="server" Text="Cancel Web Control Mode" OnClick="Btn_WebControlCancel_Click"></asp:Button>
                            </div>
                        </div>
                        <div class="spacerL"></div>
                        <div class="col widthL">
                            <div class="row">
                                <span style="font-weight:bold;">Countdown to revert to schedule:&nbsp;</span>
                                <asp:Label id="Lbl_TimeRemaining" runat="server" Text=""></asp:Label>
                            </div>
                            <div class="row">
                                <asp:Button id="Btn_ResetOneHour" runat="server" Text="Reset to 1 Hour" OnClick="Btn_ResetOneHour_Click"></asp:Button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </ContentTemplate>
            </asp:UpdatePanel>	
            <div class="innerBlock">
                <H3>
                    <SPAN>Live 7th Ribbon Override</SPAN>
                    <A class="switch" href="#">Open/Collapse</A>
                </H3>
                <div class="innerContent">
                    <asp:UpdatePanel ID="UPanel_LiveControlRibbonStatus" runat="server" UpdateMode="Conditional">
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="Timer_Status" EventName="Tick"></asp:AsyncPostBackTrigger>
                    </Triggers> 
                    <ContentTemplate>
                    <div class="row">
                        <span style="font-weight:bold;">7th Ribbon Status:&nbsp;</span>
                        <asp:Label id="Lbl_7thRibbonStatus" runat="server" Text=""></asp:Label>
                    </div>
                    <div class="row">
                        <label>Current Override Text</label>
                        <asp:TextBox id="TextArea_CurrentText" runat="server" TextMode="MultiLine" Enabled="false" CssClass="widthXL heightS"></asp:TextBox>
                    </div>
                    </ContentTemplate>
                    </asp:UpdatePanel>
                    <div class="row">
                        <label>New Override Text</label>
                        <div class="row" style="border:1px solid #aaa; background:#ddd; padding:5px; width:812px;">
                        <div id="tickerEditorContainer"></div>
                        <asp:TextBox id="TextArea_7thRibbon" runat="server" TextMode="MultiLine" CssClass="widthXL heightS"></asp:TextBox>
                        </div>
                    </div>
                    <asp:UpdatePanel ID="UPanel_LiveControlRibbonButton" runat="server" UpdateMode="Conditional">
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="Timer_Status" EventName="Tick"></asp:AsyncPostBackTrigger>
                    </Triggers> 
                    <ContentTemplate>
                    <div class="row">
                        <asp:Button ID="Btn_7thRibbonOverride" runat="server" Text="Update Text And Initiate 7th Ribbon Override" OnClick="Btn_7thRibbonOverride_Click"></asp:Button>
                        <div class="spacerS"></div>
                        <asp:Button ID="Btn_7thRibbonOverrideCancel" runat="server" Text="Cancel 7th Ribbon Override" OnClick="Btn_7thRibbonOverrideCancel_Click"></asp:Button>
                    </div>
                    </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
            </div>
        
		<div class="innerBlock">
			<h3>
				<span>Editor</span>
				<a href="#" class="switch">Open/Collapse</a>
			</h3>
            <div class="innerContent" id="liveControlDDEditorContainer">
	        </div>		
		</div>
		<div class="innerBlock collapsed">
			<h3>
				<span>Log</span>
				<a href="#" class="switch">Open/Collapse</a>
			</h3>
	        <div class="innerContent">
                <textarea id="liveControl_Log" class="TextArea_Log" cols="20" rows="2"></textarea>
	        </div>
		</div>
	</div>
<!-- right block end -->
</div>
<!-- main content end --> 

<!-- draggable info panel -->  
<asp:Panel ID="Panel_GetInfo" runat="server" Width="223" CssClass="popupPanel" >
<div id="getInfoPanel">
    <strong>
        <span>Info</span>
        <img alt="Close" src="Images/close.gif" style="float:right; margin:0 5px 0 0; border:none; display:inline; cursor:pointer;" onclick="resetGetInfo();" />
        <!--<a href="#" onclick="resetGetInfo();">Close</a>-->
    </strong>
    <div id="getInfo_NothingSelected" style="display:block; float:left; padding:5px;">Nothing selected...</div>
    <div id="getInfo_MultipleSelected" style="display:none; float:left; padding:5px;">Multiple items selected...</div>
    <dl id="infoInner" class="inner">
    </dl>
</div>
</asp:Panel>
<cc2:DragOverlayExtender ID="DragOverlayExtender2" runat="server" TargetControlID="Panel_GetInfo" Enabled="true" />
<cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" 
    TargetControlID="Panel_GetInfo" 
    Rounded="false"
    Width="5"
    Opacity="0.25" 
    TrackPosition="true"  />
<!-- end draggable info panel -->       

<!-- package context-sensitive menu -->
<div id="packageListMenu" ondblclick="if (this.style.display = 'block') {this.style.display = 'none';}"  style="background-color:Black;">
    <ul class="drop">
        <li id="packageListMenuClear"><a href="#" onclick="hideMenu(); activeEditor.checkClearList();">Clear Contents</a></li></ul>
</div>
<!-- package context-sensitive menu ends -->

<!-- event context-sensitive menu -->
<div id="eventMenu" ondblclick="if (this.style.display = 'block') {this.style.display = 'none';}"  style="background-color:Black;">
    <ul class="drop">
        <li id="eventMenuCopy"><a href="#" onclick="hideMenu(); activeEditor.copyToClip();">Copy</a></li><li id="eventMenuCut"><a href="#" onclick="hideMenu(); activeEditor.cutToClip();">Cut</a></li><li id="eventMenuPaste" class="wSep"><a href="#" onclick=" hideMenu(); activeEditor.checkPasteFromClip();">Paste</a></li><li id="eventMenuAdd"><a href="#" onclick="hideMenu(); activeEditor.addFromIcon();">Add</a></li><li id="eventMenuRemove" class="wSep"><a href="#" onclick="hideMenu(); activeEditor.remove();">Remove</a></li><li id="eventMenuHotKeys" class="wSep"><a href="#" onclick="hideMenu();" onmouseover="activeEditor.showHKMenu();" onmouseout="activeEditor.hideHKMenu();">Assign Hot Key</a></li><li id="eventMenuLoop"><a href="#" onclick="hideMenu(); showLoop();">Loop&hellip;</a></li></ul>
</div>
<!-- event context-sensitive menu ends -->

<!-- unsaved changes popup begins -->
<asp:Panel ID="Panel_UnsavedChanges" runat="server" CssClass="popupPanel">
<div id="unsavedChangesAlert" class="unsavedChanges">
    <strong>
        <span>Unsaved Changes</span>
        <%--<a href="#" class="close">Close</a>--%>
    </strong>
    <div class="inner">
	    <label>
		    You have unsaved changes. Continue?  
	    </label>
	    <br />
	    <input type="button" value="Save Changes" onclick="saveContinue(true);"/>
	    <div class="spacerM"></div>
	    <input type="button" value="Don't Save Changes" onclick="saveContinue(false);" />
	    <div class="spacerM"></div>
	    <input type="button" value="Cancel" onclick="$('unsavedChangesAlert').style.display = 'none';" />
    </div>
</div>
</asp:Panel>
<cc2:DragOverlayExtender ID="DragOverlayExtender3" TargetControlID="Panel_UnsavedChanges" runat="server" Enabled="true" />
<cc1:DropShadowExtender ID="DropShadowExtender3" runat="server"
    TargetControlID="Panel_UnsavedChanges" 
    Rounded="false"
    Width="5"
    Opacity="0.25" 
    TrackPosition="true"  />
<!-- unsaved changes popup ends -->

<!-- hot key panel -->  
<asp:Panel ID="Panel_HK_LiveControl" runat="server" Width="180" CssClass="popupHKPanel" >
<div id="draggablehotkeys_liveControl" class="hotkeys">
    <strong>
        <span>Hot Keys - Live Control</span>
        <a href="#" class="close">Close</a>
    </strong>
    <div class="inner">
        <div class="row">
            <span style="float:left; font-weight:bold; padding-top:2px;">1&nbsp;&nbsp;&nbsp;</span><div id="event_HK1" ondblclick="activeEditor.addFromHK(1);" class="hkBox">Empty</div>
        </div>
        <div class="row">
            <span style="float:left; font-weight:bold; padding-top:2px;">2&nbsp;&nbsp;&nbsp;</span><div id="event_HK2" ondblclick="activeEditor.addFromHK(2);" class="hkBox">Empty</div>
        </div>
        <div class="row">
            <span style="float:left; font-weight:bold; padding-top:2px;">3&nbsp;&nbsp;&nbsp;</span><div id="event_HK3" ondblclick="activeEditor.addFromHK(3);" class="hkBox">Empty</div>
        </div>
        <div class="row">
            <span style="float:left; font-weight:bold; padding-top:2px;">4&nbsp;&nbsp;&nbsp;</span><div id="event_HK4" ondblclick="activeEditor.addFromHK(4);" class="hkBox">Empty</div>
        </div>
        <div class="row">
            <span style="float:left; font-weight:bold; padding-top:2px;">5&nbsp;&nbsp;&nbsp;</span><div id="event_HK5" ondblclick="activeEditor.addFromHK(5);" class="hkBox">Empty</div>
        </div>
    </div>
</div>
</asp:Panel>
<cc2:DragOverlayExtender ID="DragOverlayExtender_HK_LiveControl" runat="server" TargetControlID="Panel_HK_LiveControl" Enabled="true" />
<cc1:DropShadowExtender ID="DropShadowExtender_HK_LiveControl" runat="server" 
    TargetControlID="Panel_HK_LiveControl" 
    Rounded="false"
    Width="5"
    Opacity="0.25" 
    TrackPosition="true"  />
<!-- end hot key panel -->

<!-- hot key sub menu -->
<div id="hotKeyMenu" onmouseover="this.style.display='block';" onmouseout="this.style.display='none';" style="background-color:Black;">
    <ul class="drop">
        <li id="hotKeyMenu_1"><a href="#" onclick="hideMenu(); activeEditor.assignHotKey(1);">Slot 1</a></li><li id="hotKeyMenu_2"><a href="#" onclick="hideMenu(); activeEditor.assignHotKey(2);">Slot 2</a></li><li id="hotKeyMenu_3"><a href="#" onclick="hideMenu(); activeEditor.assignHotKey(3);">Slot 3</a></li><li id="hotKeyMenu_4"><a href="#" onclick="hideMenu(); activeEditor.assignHotKey(4);">Slot 4</a></li><li id="hotKeyMenu_5"><a href="#" onclick="hideMenu(); activeEditor.assignHotKey(5);">Slot 5</a></li></ul>
</div>
<!-- hot key sub menu ends -->   

<!-- multi-select context-sensitive menu -->
<div id="multiSelectMenu" ondblclick="if (this.style.display = 'block') {this.style.display = 'none';}"  style="background-color:Black;">
    <ul class="drop">
        <li id="multiSelectMenuCopy"><a href="#" onclick="hideMenu(); activeEditor.copyToClip();">Copy</a></li><li id="multiSelectMenuCut"><a href="#" onclick="hideMenu(); activeEditor.cutToClip();">Cut</a></li></ul>
</div>
<!-- multi-select context-sensitive menu ends -->

<!-- loop menu begins -->
<asp:Panel ID="Panel_Loop" runat="server" CssClass="popupPanel" >
<div id="loopPopup" class="loop">
	<div class="form">
		<strong>
			<span>Loop Package</span>
		</strong>
		<div class="inner">
		    <div class="row">
			    <div style="margin-left:10px;" class="col">
			        <input type="radio" id="loopOptionFill" onclick="$('loopOptionUntil').checked = false;" />&nbsp;Fill Available
			    </div>
		    </div>
		    <div class="row">
			    <div style="margin-left:10px; margin-top:3px;" class="col">
			        <input type="radio" id="loopOptionUntil" onclick="$('loopOptionFill').checked = false;"/>
		            &nbsp;Loop Until
		        </div>
	            <div class="spacerXL"></div>
	            <div class="col">
                    <select id="loopSelect" onchange="updateLoopOptions();">
                        <option>Select</option>
                    </select>
                </div>
		    </div>
		    <div class="row" style="margin:4px 0 0 10px;">
		        <div class="col">
			        <input type="button" name="submit" value="Loop" id="loopSubmit" onclick="hideLoop(); checkLoop();" />
			    </div>
			    <div class="spacerXL"></div>
			    <div class="col">
			        <input type="button" name="submit" value="Cancel" onclick="hideLoop();"/>
		        </div>
		    </div>
	    </div>
    </div>
</div>
</asp:Panel>
<cc2:DragOverlayExtender ID="DragOverlayExtender_Loop" runat="server" TargetControlID="Panel_Loop" Enabled="true" />
<cc1:DropShadowExtender ID="DropShadowExtender_Loop" runat="server" 
    TargetControlID="Panel_Loop" 
    Rounded="false"
    Width="5"
    Opacity="0.25" 
    TrackPosition="true"  />
<!-- loop menu ends -->

<!-- yes/no popup begins -->
<asp:Panel ID="Panel_YesNo" runat="server" Width="300" CssClass="popupPanel">
<div id="yesNoPopup" class="yesNoAlert">
    <strong id="yesNoHeader">
        <span id="yesNoSpan"></span>
        <!--<a href="#" class="close">Close</a>-->
    </strong>
    <div class="inner">
	    <label id="yesNoLabel">
	    </label>
	    <br />
	    <input id="yesNo_YesBtn" type="button" value="Yes" />
	    <div class="spacerXL"></div>
	    <input id="yesNo_NoBtn"type="button" value="No" />
    </div>
</div>
</asp:Panel>
<cc2:DragOverlayExtender ID="DragOverlayExtender_YesNo" TargetControlID="Panel_YesNo" runat="server" Enabled="true" />
<cc1:DropShadowExtender ID="DropShadowExtender_YesNo" runat="server"
    TargetControlID="Panel_YesNo" 
    Rounded="false"
    Width="5"
    Opacity="0.25" 
    TrackPosition="true"  />
<!-- yes/no popup ends -->

<!-- open for edit popup begins -->
<asp:Panel ID="Panel_OpenForEdit" runat="server" Width="300" CssClass="popupPanel">
<div id="openForEditAlert" class="openForEdit">
    <strong>
        <span id="openForEdit_Span"></span>
        <a href="#" class="close">Close</a>
    </strong>
    <div class="inner">
	    <label id="openForEdit_Label">
	    </label>
	    <!--<br />
	    <input id="Button1" type="button" value="OK"/>-->
    </div>
</div>
</asp:Panel>
<cc2:DragOverlayExtender ID="DragOverlayExtender_OpenForEdit" TargetControlID="Panel_OpenForEdit" runat="server" Enabled="true" />

<!-- open for edit popup ends -->

<!-- custom font color tag popup begins -->
<asp:Panel ID="Panel_CustomFontColor" runat="server" Width="250" CssClass="popupPanel">
<div id="customFontColorPopup" class="customFontColorPopup">
    <strong>
	    <span>Insert Custom Font Color Tag</span>
    </strong>
    <div class="inner">
        <div class="row">
            <label>Completed RGB or CMYK values will automatically convert to Hex values</label>
            <label id="customColorAlert" style="font-weight:bold; color:Red; display:none;"></label>
        </div>
        <div class="row">
            <div class="col" style="width:55px;">
                <label>R</label>
                <input type="text" style="width:20px;" id="txtCustomColor_R" onchange="customColorCheck(this);" />
            </div>
            <div class="col" style="width:55px;">
                <label>G</label>
                <input type="text" style="width:20px;" id="txtCustomColor_G" onchange="customColorCheck(this);" />
            </div>
            <div class="col" style="width:55px;">
                <label>B</label>
                <input type="text" style="width:20px;" id="txtCustomColor_B" onchange="customColorCheck(this);" />
            </div>
        </div>
        <div class="row">
            <div class="col" style="width:55px;">
                <label>C</label>
                <span><input type="text" style="width:20px;" id="txtCustomColor_C" onchange="customColorCheck(this);" />&nbsp;%</span>
            </div>
            <div class="col" style="width:55px;">
                <label>M</label>
                <span><input type="text" style="width:20px;" id="txtCustomColor_M" onchange="customColorCheck(this);" />&nbsp;%</span>
            </div>
            <div class="col" style="width:55px;">
                <label>Y</label>
                <span><input type="text" style="width:20px;" id="txtCustomColor_Y" onchange="customColorCheck(this);" />&nbsp;%</span>
            </div>
            <div class="col" style="width:55px;">
                <label>K</label>
                <span><input type="text" style="width:20px;" id="txtCustomColor_K" onchange="customColorCheck(this);" />&nbsp;%</span>
            </div>
        </div>
        <hr />
        <div class="row">
            <label id="customColorHexAlert" style="font-weight:bold; color:Red; display:none;">Hex value must be 6 characters long including only numbers or the letters A-F (capitals or lower-case)</label>
        </div>
        <div class="row" style="padding:2px 10px 2px;">
            <div class="col">
                <span style="line-height:17px;">Hex Value #</span><input type="text" style="width:70px;" id="txtCustomColor_Hex" value="" onchange="customColorCheckHex();" onkeyup="hexKeyUpEvent();" />
            </div>
            <div class="spacerM"></div>
            <div class="col">
                <div id="customColorExample" style="background-color:#fff; width:17px; height:17px; border:solid 1px #BEBEBE; "></div>
            </div>
        </div>

        <div class="row" style="padding:3px 10px 2px;">
            <input type="button" style="float:left; padding:0px 5px;" name="submit" value="Insert Custom Hex Value" onclick="insertCustomFontColorTag();"/>
            <input type="button" style="float:left; width:65px;" name="submit" value="Cancel" onclick="hideCustomFontColorTag();" />
        </div>
	    </div>
    </div>
</div>
</asp:Panel>
<cc2:DragOverlayExtender ID="DragOverlayExtender_CustomFontColor" TargetControlID="Panel_CustomFontColor" runat="server" Enabled="true" />
<cc1:DropShadowExtender ID="DropShadowExtender_CustomFontColor" runat="server"
TargetControlID="Panel_CustomFontColor" 
Rounded="false"
Width="5"
Opacity="0.25" 
TrackPosition="true"  />
<!-- custom font color tag popup ends -->

<!-- debugging box -->
<div id="coordBox" style="display:none">
    <span id="mouseCoords">(x,y): </span><br />
    <!--<span id="dropPoint">drop point: </span><br />
    <span id="dropBoxId">drop box id: </span><br />
    <span id="affectedArray">affected: </span><br />-->
    <span id="dropsIndex">drops index: </span><br />    
    <span id="numDrags">draggables: </span><br />
    <span id="numDrops">droppables: </span><br />
    <span id="activeDrag">active drag: </span><br />  
    <span id="activeDrop">active drop: </span><br />  
    <span id="activeList">active list: </span><br />
</div>

<script type="text/javascript">      

    document.onclick =  function () {
            $('lblMessages').style.display = "none";
        }
    
    // assign all global javascript variables
    sessionId = "<%= Hidden_SessionID.Value %>";
    userId = "<%= Hidden_UserID.Value %>";
    activeEditorPageId = "<%= Hidden_EditorPageID.Value %>"; 
    liveControlPackageId = "<%= Hidden_LiveControlPackageID.Value %>"; 
    liveControlTickerEditorTextArea = $('<%= TextArea_7thRibbon.ClientID %>');
    
    // function to prepare save
	function saveLiveControlPackage() {
	    var liveControlSaveRequest = new XMLHttpRequest();
        //event.cancelBubble=true;
        // create save xml
        var xmlStr = "<?xml version=\"1.0\" encoding=\"utf-8\" ?>";
        xmlStr += "<ROOT>";
        xmlStr += "<STOREDPROCEDURE Name=\"sproc_WEB_UpdateFromBLPackage\" />";
        xmlStr += "<BL_PACKAGE BLID=\"\" SessionID=\"" + sessionId + "\" ID=\"" + liveControlPackageId + "\" ";
        xmlStr += "Name=\"WebControlPackage\" Duration=\"1900-01-01T00:30:00\" ThisEnabled=\"true\" EnabledNN=\"false\" IngestedNN=\"false\" OnPlayersNN=\"false\" IsWebControlPackage=\"true\" />";
        xmlStr += activeEditor.ddLists[0].saveItems();
        xmlStr += "</ROOT>";
        
        var url = "AjaxPost.aspx";
        liveControlSaveRequest.open('POST', url, false);
        liveControlSaveRequest.setRequestHeader("Content-Type", "text/xml");
        liveControlSaveRequest.send(xmlStr);
        if (liveControlSaveRequest.readyState == 4) {
		    if (liveControlSaveRequest.status == 200) {
		        var msgNode = $('lblMessages');
		        msgNode.innerHTML = "Live event list saved";
                msgNode.style.color = "green";
		        msgNode.style.display = "block";
		        return;
		    }
		}
	} 
    
    loadLiveControlEditor();
    
</script>

</form>
</asp:Content>

